<template>
  <div class="w">

    <!-- 标题 -->
    <div class="title-area">
      <span>
        产品信息
      </span>
    </div>

    <!-- 主体内容显示区 -->
    <div class="content-area">

      <!-- 查询表单区 -->
      <div class="form-area">
        <Form
          name="queryForm"
          ref="queryForm"
          :model="queryForm"
          :labelCol="{span: 5, offset: 0}"
          :initialValues="{}">

          <Row :gutter="16">
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="produceName" label="产品名称" initialValue="">
                  <Input placeholder="请输入产品名称" style="width: 70%" v-model="queryForm.produceName" />
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="firmName" label="厂商名称" initialValue="">
                  <Select
                    placeholder="请输入厂商名称进行搜索"
                    style="width: 70%"
                    v-model="queryForm.firmName"
                    allowClear>
                    <Option key="1" value="金仓股份有限公司" label="金仓股份有限公司" />
                    <Option key="2" value="武汉达梦股份有限公司" label="武汉达梦股份有限公司" />
                    <Option key="3" value="瀚高基础软件股份有限公司" label="瀚高基础软件股份有限公司" />
                  </Select>
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="linkMan" label="联系人" initialValue="">
                  <Input placeholder="请输入联系人" style="width: 70%" v-model="queryForm.linkMan" />
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem name="linkPhone" label="联系电话" initialValue="">
                  <Input placeholder="请输入联系电话" style="width: 70%" v-model="queryForm.linkPhone" />
                </FormItem>
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
              </div>
            </Col>
            <Col :span="8">
              <div class="formGrid">
                <FormItem :wrapperCol="{span: 20, offset: 5}">
                  <Button type="primary" @click="onSubmit">查 询</Button>
                  <Button style="margin-left: 10px" @click="onReset">重 置</Button>
                  <Button type="link" style="color: #b30000">更多 <Icon name="down" style="vertical-align: middle" /></Button>
                </FormItem>
              </div>
            </Col>
          </Row>  
        </Form>
      </div>

      <!-- 分割线 -->
      <Divider />

      <!-- 按钮区 -->
      <div class="button-area">
        <Button type="primary" @click="showFormPage">
          <Icon name="add" /> 新增
        </Button>
      </div>

      <!-- 列表区 -->
      <Table
        style="margin-top: 20px"
        :columns="tableColumns"
        :dataSource="tableData"
        :bordered="false"
        :rowKey="(record) => record.key"
        @change="handleTableChange"
        :scroll="{y: 470}"
        :pagination="{
          total: tableData.length,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSize,
          current,
        }">
        <template #render="render">
          <div v-if="render.dataIndex == 'firmName'">
            <span>{{render.record.firm.firmName}}</span>
          </div>
          <div v-else-if="render.dataIndex == 'linkPhone'">
            <span>{{render.record.firm.linkPhone}}</span>
          </div>
          <div v-else-if="render.dataIndex == 'isInCatalog'">
            <span>{{render.record.firm.isInCatalog ? '是' : '否'}}</span>
          </div>
          <div v-else-if="render.dataIndex == 'operation'">
            <a href="#" @click="tblOptEdit(render.record)">编辑</a>
            <span> | </span>
            <Popconfirm :title="`是否确认删除序号为 ${render.record.produceId} 的产品信息？`" @confirm="removeProduce(render.record)">
              <a href="#">删除</a>
            </Popconfirm>
          </div>
        </template>
        <template #paginationTotal="props">
          <span>总共{{ props.total }} 条</span>
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
import { Message } from '@uni/vue';
import { listProduce, delProduce } from "@/api/doapp/produce";

export default {
    name: "app",
    data: function () {
      return {
        queryForm: {
          produceName: '',
          firmName: '',
          linkMan: '',
          linkPhone: ''
        },
        tableColumns: [
          {"title":"序号", "dataIndex":"produceId", "key":"produceId", width: 60},
          {"title":"产品名称", "dataIndex":"produceName", "key":"produceName"},
          {"title":"版本号", "dataIndex":"release", "key":"release"},
          {"title":"厂商名称", "dataIndex":"firmName", "key":"firmName"},
          {"title":"联系电话", "dataIndex":"linkPhone", "key":"linkPhone"},
          {"title":"是否信创在目录", "dataIndex":"isInCatalog", "key":"isInCatalog"},
          {"title":"入库时间", "dataIndex":"updateTime", "key":"updateTime", "width":200},
          {"title":"操作", "dataIndex":"operation", "key":"operation", "width":120}
        ],
        tableData: [],
        current: 1,
        pageSize: 5,
      }
    },
    mounted: function () {
      this.queryList();
    },
    methods: {
      queryList: async function () {
        const rs = await listProduce();
        if (rs.code !== 200) return Message.error({ text: '获取产品列表信息失败：' + rs.msg });

        // console.log("rs: ", rs);
        this.tableData = rs.rows;
      },
      tblOptEdit: function (record) {
        this.$router.push({
          path: '/productInfoDetails',
          query: { record: record }
        });
      },
      removeProduce: async function (record) {
        // console.log("removeProduce: ", record);
        const rs = await delProduce(record.produceId);
        if (rs.code !== 200) return Message.error({ text: '删除产品失败：' + rs.msg });

        Message.success({ text: '删除产品信息完成' });
        this.queryList();
      },
      onSubmit: function () {
        console.log('on submit: ', this.queryForm);
        // this.$refs.queryForm.submit();
      },
      onReset: function () {
        console.log('on reset');
        this.queryForm = {
          name: "",
          address: "",
          contact: "",
          tel: ""
        }
        // this.$refs.queryForm.reset();
      },
      handleTableChange: function (p, filters) {
        const { current, pageSize } = p;
        this.current = current;
        this.pageSize = pageSize;
        console.log('===>>>>filters', p, filters);
      },
      showFormPage: function () {
        this.$router.push('productInfoForm')
      }
    }
}
</script>

<style scoped>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 15px;
  }

  /* 查询表单区 */
  .form-area {
    /* background-color: lightcyan; */
    margin-left: 50px;
    margin-right: 50px;
  }
  .formGrid {
    /* background-color: orange; */
    margin-top: 15px;
    height: 35px;
    line-height: 35px;
  }

  .uni-divider {
    margin: 0;
  }

  /* 按钮区 */
  .button-area {
    margin-top: 15px;
    /* background-color: lightcyan; */
  }
  .button-area svg {
    margin-top: 3px;
    margin-right: 5px;
  }

  /* 列表区 */
</style>

